<template>
	<view class="content">
		<!-- 姓名 电话 地址 -->
		<view class="userInfo f-c-b" @click="popFlag=true">
			<view class="userInfo-left f-c-b">
				<view class="userInfo-left-map f-c-c">
					<u-icon color="#ffffff" size="35" name="map-fill"></u-icon>
				</view>
				<view class="userInfo-left-info">
					<text class="f40">喜羊羊</text>
					<text class="c6">16578787878</text>
				</view>
			</view>
			<view class="userInfo-right">
				<u-icon size="40" color='#666666' name="arrow-right"></u-icon>
			</view>
		</view>

		<!-- 订单 -->
		<view v-for="(item,index) in dataList" class="item">
			<view class="item-box">
				<view class="f-c-b" v-show="item.dataList.length!=0">
					<view @click="$to(`../shop/shop?title=${item.storeName}`)" class="f30">{{item.storeName}}</view>
				</view>
				<view class="" v-for="(item2,index2) in item.dataList">
					<view class="item-item2">
						<view class="f-c-c">
							<view class="">
								<image :src="item2.url" mode="widthFix"></image>
							</view>
							<view class="item-item2-right">
								<view>{{item2.title}}</view>
								<view class="c6 price_num f-c-b">
									<view class="price">
										<text class="f40">￥{{item2.price.split('.')[0]}}.</text>
										<text>{{item2.price.split('.')[1]}}</text>
									</view>
									<view class="">×{{item2.num}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 订单备注 -->
			<view class="beizhu">
				<view class="f30">订单备注</view>
				<view class="textareaBox">
					<textarea class="textarea" value="" placeholder="请在此处输入订单备注" placeholder-class="plac"/>
				</view>
			</view>
		</view>
		
		<!-- 合计 -->
		<view class="selectAll f-c-b">
			<view class="selectAll-left f-c-c">
				<view class="selectAll-left-right">
					<view>合计：<text class="f40" style="color: #FF2929;">￥{{priceAll}}</text></view>
				</view>
			</view>
			<view class="selectAll-right f-c-c cw">
				<view>结算</view>
			</view>
		</view>
		
		<u-popup v-model="popFlag" mode="center" border-radius="14" :closeable='true' width="390" height="510">
			<view>
				<view class="f40 f-c-c popTitle">收获地址</view>
				<view class="popTex">
					<textarea value="" placeholder="请输入详细地址（例：山东 省济南市历下区汇源大厦）" placeholder-class="plaCla" />
				</view>
				<view @click="$to(`../settlement/settlement?price=${priceAll}`)" class="btn f-c-c cw">确认</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				priceAll:0,
				popFlag:false
			}
		},
		onLoad(e) {
			this.dataList = JSON.parse(e.dataList)
			this.getPriceAll()
		},
		methods: {
			getPriceAll(){
				let num=0;
				this.dataList.forEach(item=>{
					item.dataList.forEach(val=>{
						num+=val.num*Number(val.price)
					})
				})
				this.priceAll=num.toFixed(2)
			},
		}
	}
</script>

<style>
	.content {
		height: 100vh;
		background-color: #F4F4F4;
		padding: 2rpx;
	}

	.userInfo {
		background-color: #FFFFFF;
		padding: 30rpx;
	}

	.userInfo-left-map {
		width: 57rpx;
		height: 57rpx;
		background: linear-gradient(#FCA266, #FF5E00);
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.userInfo-left-info text:nth-child(1) {
		margin-right: 20rpx;
	}
	
	.item {
		margin: 20rpx;
	}
	.item-box{
		background-color: #FFFFFF;
		padding: 20rpx;
		border-radius: 20rpx;
	}

	.item-item2 {
		margin: 10rpx 0;
	}

	.item-item2-right {
		margin-left: 20rpx;
	}

	.item-item2 image {
		width: 160rpx;
	}

	.price_num {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.price {
		margin-right: 50rpx;
	}
	
	.beizhu{
		background-color: #FFFFFF;
		padding: 20rpx;
		border-radius: 20rpx;
		margin: 20rpx 0;
	}
	.textareaBox{
		background-color: #EEEEEE;
		width: 100%;
		margin: 20rpx 0;
		height: 200rpx;
		border-radius: 10rpx;
	}
	.textarea{
		padding: 20rpx;
		width: 94%;
	}
	.plac{
		font-size: 30rpx;
	}
	
	.selectAll {
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
		width: 100%;
		height: 100rpx;
		padding: 0 30rpx;
		box-shadow: 0 0 8px 1px #999;
	}

	.selectAll-left-left {
		margin-right: 40rpx;
	}

	.selectAll-right view {
		background-color: #FF8710;
		padding: 10rpx 45rpx;
		border-radius: 30rpx;
	}
	
	.popTitle {
	margin: 20rpx;
	}
	
	.popTex {
	background-color: #F4F4F4;
	margin: 0 20rpx;
	padding: 10rpx;
	}
	
	.popTex textarea {
	width: 100%;
	}
	
	.plaCla {
	font-size: 30rpx;
	color: #999999;
	}
	
	.btn {
	background-color: #FF8710;
	margin: 20rpx;
	padding: 8rpx 0;
	border-radius: 10rpx;
	}
</style>
